<template>
  <div id="login_root">
    <div id="header">
      <!-- 头部logo -->
      <div class="topBar">
        <!-- 头部logo -->
        <h1 class="logo">
          <router-link to="/home" title="中原工学院大学生社团联合会">
            <img style="height: 71px" src="@/assets/images/logo/logo03.png"/>
          </router-link>
          <div class="logo-title">欢迎登录</div>
        </h1>
      </div>
    </div>
    <!--头部logo-->
<!--    <div class="w" style="width: 1210px">
      <div id="logo">
        <router-link to="/home" title="中原工学院大学生社团联合会">
          <img src="@/assets/images/logo/logo02.png" alt="中原工学院大学生社团联合会" width="430" height="60">
        </router-link>
        <b></b>
      </div>
    </div>-->

    <!--主要内容-->

    <div id="content">
      <!--头部-->
      <div class="tips-wrapper">
        <div class="tips-inner">
          <div class="cont-wrapper">
            <i class="icon-tips"></i>
            <p>依据《网络安全法》，我们会保护好您的个人隐私。</p>
          </div>
        </div>
      </div>

      <!--输入框-->
      <div class="login-wrap">
        <div class="w">
          <div style="border: 1px solid #EBEEF5;box-shadow: 0px 2px 13px 2px rgb(0 0 0 / 20%);" class="login-form">
            <!--头部-->
            <!--            <div class="tips-wrapper">
                          <div class="tips-inner">
                            <div class="cont-wrapper">
                              <i class="icon-tips"></i>
                              <p>我们不会以任何理由要求您转账汇款，谨防诈骗。</p>
                            </div>
                          </div>
                        </div>-->
            <div class="login-tab"><p>账户登录</p></div>

            <!--输入框-->
            <div class="login-box" style="display: block;visibility: visible;">
              <div class="mt tab-h" style="height: 35px;"></div>
              <div class="msg-wrap">
                <div class="msg-error" v-if="showErrMsg"><b></b>{{ errMsg }}</div>
              </div>
              <div class="mc">
                <div class="form">
                  <!--用户名-->
                  <div @click="checkFocus(1)" class="item item-fore1"
                       :class="[showItemError1?'item-error':'',showColor1?'item-focus':'']">
                    <label class="login-label name-label"></label>
                    <input type="text" class="itxt" name="username"
                           autocomplete="off"
                           v-model="loginForm.username"
                           placeholder="邮箱/用户名/登录手机"/>
                    <span class="clear-btn" @click="clearBtn(1)"
                          :style="{'display':loginForm.username!=''?'block':'none'}"></span>
                  </div>

                  <!--密码-->
                  <div @click="checkFocus(2)"
                       :class="[showItemError2?'item-error':'',showColor2?'item-focus':'']"
                       class="item item-fore2" style="visibility: visible;">
                    <label class="login-label pwd-label"></label>
                    <input @keyup="loginKeyDown" type="password" name="password"
                           class="itxt itxt-error"
                           v-model="loginForm.password" @keyup.enter="handleLogin"
                           autocomplete="off" placeholder="密码"/>
                    <span class="clear-btn" @click="clearBtn(2)"
                          :style="{'display':loginForm.password!=''?'block':'none'}"></span>
                    <span class="capslock" v-show="bigChar"><b></b>大小写锁定已打开</span>
                  </div>

                  <!--验证码-->
                  <div id="o-authcode" class="item item-vcode item-fore3">
                    <input @click="checkFocus(3)" style="height: 36px"
                           :class="[showColor3?'itxt09':(showItemError3?'itxt10':'itxt')]"
                           type="text" class="itxt02"
                           v-model="loginForm.code" placeholder="验证码"
                           @keyup.enter="handleLogin">
                    <img style="height: 38px;width: 100px" :src="codeUrl" @click="getCode" class="verify-code"/>
                    <a href="javascript:void(0)" @click="getCode">看不清换一张</a>
                  </div>
                  <!--登录-->
                  <div class="item item-fore5">
                    <div class="login-btn">
                      <button @click="handleLogin" class="btn-img btn-entry">登&nbsp;&nbsp;&nbsp;&nbsp;录
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!--尾部-->
            <div class="coagent">
              <ul>
                <li>
                  <router-link to="#" style="font-size: 14px;">忘记密码？</router-link>
                </li>
                <li class="extra-r">
                  <div class="regist-link">
                    <router-link to="/register/common" style="color: #b61d1d;"><b></b>立即注册</router-link>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="login-banner">
          <div class="w">
            <div class="i-inner">
              <img style="padding: 40px 0 0 30px;" src="../assets/images/login/login_logo.png">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--尾部-->
    <Footer></Footer>
  </div>
</template>

<script>
import { getCodeImg,login } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
import Footer from '@/layout/components/Footer'

export default {
  name: 'Login',
  components: { Footer },
  data() {
    return {
      showItemError1: false,
      showItemError2: false,
      showItemError3: false,
      showColor1: false,
      showColor2: false,
      showColor3: false,
      showErrMsg: false,
      firstTochar: false,
      bigChar: false,
      errMsg: '',
      codeUrl: '',
      cookiePassword: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: true,
        code: '',
        uuid: ''
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode()
    this.getCookie()
  },
  methods: {
    //获取验证码
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },

    //存Cookie
    getCookie() {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },

    //登录
    handleLogin() {
      this.showColor1 = this.showColor2 = this.showColor3 = false
      if (!this.loginForm.username) {
        this.showItemError1 = true
      } else {
        this.showItemError1 = false
      }
      if (!this.loginForm.password) {
        this.showItemError2 = true
      } else {
        this.showItemError2 = false
      }
      if (!this.loginForm.code) {
        this.showItemError3 = true
      } else {
        this.showItemError3 = false
      }
      if (!this.loginForm.password || !this.loginForm.username || !this.loginForm.code) {
        this.showErrMsg = true
        if (!this.loginForm.username && this.loginForm.password && this.loginForm.code) {
          this.errMsg = '请输入用户名'
        }else if (this.loginForm.username && !this.loginForm.password && this.loginForm.code ) {
          this.errMsg = '请输入密码'
        }else if (this.loginForm.username && this.loginForm.password && !this.loginForm.code ) {
          this.errMsg = '请输入验证码'
        }else if(!this.loginForm.username && !this.loginForm.password && this.loginForm.code){
          this.errMsg = '请输入用户名和密码'
        }else if(!this.loginForm.username && this.loginForm.password && !this.loginForm.code){
          this.errMsg = '请输入用户名和验证码'
        }else if(this.loginForm.username && !this.loginForm.password && !this.loginForm.code){
          this.errMsg = '请输入密码和验证码'
        }else {
          this.errMsg = '请输入用户名、密码和验证码'
        }
        return
      } else {
        this.showErrMsg = false
        this.errMsg=''
      }
      if (this.loginForm.rememberMe) {
        Cookies.set("username", this.loginForm.username, { expires: 30 });
        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
      } else {
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove('rememberMe');
      }
      login(this.loginForm).then(res => {
        if (res.code===500){
          this.showErrMsg=true;
          this.errMsg=res.msg;
          this.getCode();
          return
        }
        this.showErrMsg=false
        this.errMsg=''
        this.$store.dispatch("Login", res);
        this.msgSuccess("登录成功");
        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
      }).catch(() => {
        this.getCode();
      });
    },
    //颜色变换
    checkFocus(e) {
      if (e === 1) {
        this.showColor1 = true
      } else {
        this.showColor1 = false
      }
      if (e === 2) {
        this.showColor2 = true
      } else {
        this.showColor2 = false
      }
      if (e === 3) {
        this.showColor3 = true
      } else {
        this.showColor3 = false
      }
    },

    //清空数据
    clearBtn(e) {
      if (e === 1) {
        this.loginForm.username = ''
      }
      if (e === 2) {
        this.loginForm.password = ''
      }
    },

    //大小写判断
    loginKeyDown(event) {
      const _that = this
      //是否输入过字母键，且判断是否按键为caps lock
      if (_that.firstTochar) {
        if (event.keyCode === 20) {
          _that.bigChar = !_that.bigChar
          return
        }
      }
      //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      var e = event || window.event
      var keyvalue = e.keyCode ? e.keyCode : e.which
      var shifKey = e.shiftKey ? e.shiftKey : ((keyvalue == 16) ? true : false)
      if (typeof (_that.loginForm.password) === 'undefined') {
        return
      }
      var strlen = _that.loginForm.password.length
      var password = _that.loginForm.password

      if (strlen) {
        var uniCode = password.charCodeAt(strlen - 1)
        if (keyvalue >= 65 && keyvalue <= 90) {
          //如果是字母键
          _that.firstTochar = true
          if (((uniCode >= 65 && uniCode <= 90) && !shifKey) || ((uniCode >= 97 && uniCode <= 122) && shifKey)) {
            _that.bigChar = true
          } else {
            _that.bigChar = false
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#login_root {

  #header{min-width: 1210px;  margin: 0 auto; text-align: center; }
  /* header */
  #header{position:relative; z-index:2; height: 90px; background: url(../assets/images/headerBg.png) left top repeat;}
  #header .topBar{position: relative; z-index: 1; height: 90px; width: 1210px; margin: 0 auto; text-align: left;}

  #header h1.logo{ width: 100%; float: left; margin: 10px 0 0 0px; display: inline;}
  #header h1.logo a{display: block;float: left;}
  #header h1.logo img{}
  #header .logo-title{
    float: left;
    height: 80px;
    line-height: 90px;
    font-size: 24px;
    color: #fff;
    margin-left: 25px;
  }

  .w {
    width: 990px;
    margin: 0 auto
  }

  #footer-2013 {
    padding-bottom: 30px;
    text-align: center
  }

  #footer-2013 .copyright {
    margin: 10px 0
  }

  #logo {
    position: relative;
    width: 560px;
    margin: 10px 0;
    height: 60px;
    float: left
  }

  #logo b {
    display: block;
    width: 110px;
    height: 40px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../assets/images/login/login_huanyi.png) no-repeat
  }

  .form input[type=password], .form input[type=text] {
    font-family: Tahoma, Helvetica, Arial
  }

  ::-ms-clear {
    display: none
  }

  ::-ms-reveal {
    display: none
  }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset
  }

  #content {
    clear: both
  }

  #content .login-wrap {
    margin-top: 0
  }

  #content .tips-wrapper {
    background: #fff8f0;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center
  }

  #content .tips-wrapper .icon-tips {
    background: url(../assets/images/login/icon-tips.png);
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px
  }

  #content .tips-wrapper .cont-wrapper {
    display: inline-block;
    *display: inline;
    width: 90%
  }

  #content .tips-wrapper .tips-inner p {
    vertical-align: middle;
    color: #999;
    font-size: 12px;
    display: inline-block;
    *display: inline
  }

  .form .item {
    position: relative;
    margin-bottom: 20px;
    z-index: 1
  }

  .form .item .login-label {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border-right: 1px solid #bdbdbd;
    background: url(../assets/images/login/pwd-icons-new.png) no-repeat
  }

  .form .item .name-label {
    background-position: 0 0
  }

  .form .item .pwd-label {
    background-position: -48px 0
  }

  .form .item-fore5 {
    margin-bottom: 10px;
    padding-top: 10px;
  }

  .form .item-fore1, .form .item-fore2 {
    border: 1px solid #bdbdbd;
    height: 38px;
    width: 304px
  }

  .form .item-fore1 .clear-btn, .form .item-fore2 .clear-btn {
    position: absolute;
    z-index: 20;
    right: 6px;
    top: 12px;
    width: 14px;
    height: 14px;
    background: url(../assets/images/login/pwd-icons-new.png) -25px -143px no-repeat;
    cursor: pointer;
    display: none
  }

  .form .item-fore1 .clear-btn:hover, .form .item-fore2 .clear-btn:hover {
    background-position: -50px -143px
  }

  .form .item-fore1 .capslock, .form .item-fore2 .capslock {
    position: absolute;
    z-index: 4;
    /*display: none;*/
    width: 106px;
    top: 28px;
    left: 50px;
    padding-left: 26px;
    height: 26px;
    line-height: 28px;
    overflow: hidden;
    background: url(../assets/images/login/capslock.png) no-repeat
  }

  .form .item-fore1 .capslock b, .form .item-fore2 .capslock b {
    display: block;
    position: absolute;
    top: 7px;
    left: 10px;
    width: 10px;
    height: 14px;
    overflow: hidden;
    background: url(../assets/images/login/pwd-icons-new.png) -104px -133px no-repeat
  }

  .form .itxt {
    line-height: 18px;
    height: 18px;
    border: 0;
    padding: 10px 0 10px 50px;
    width: 254px;
    float: none;
    overflow: hidden;
    font-size: 14px;
    font-family: '\5b8b\4f53';
    *margin: -1px 0 0
  }

  .form .itxt02 {
    padding: 10px 5px;
    width: 150px;
    text-align: center
  }

  .form .item-vcode .itxt02, .form .item-vcode .verify-code {
    float: left
  }

  .form .item-error {
    border: 1px solid #e4393c
  }

  .form .item-error .name-label {
    background-position: 0 -96px;
    border-color: #e4393c
  }

  .form .item-error .pwd-label {
    background-position: -48px -96px;
    border-color: #e4393c
  }

  .form input::-webkit-input-placeholder {
    color: #999;
    font-size: 14px
  }

  .form input:-moz-placeholder {
    color: #999;
    font-size: 14px
  }

  .form label {
    float: none
  }

  .form .item-fore1 {
    z-index: 6
  }

  .form .item-fore2 {
    height: 38px;
    visibility: hidden
  }

  .form .item-fore3 {
    z-index: 5;
    margin-bottom: 13px
  }

  .form .item-fore3.hide {
    margin-bottom: 0
  }

  .form .item-vcode .placeholder {
    left: 25px
  }

  .form .item-vcode .itxt02, .form .item-vcode .verify-code {
    float: left
  }

  .form .item-vcode a {
    display: inline-block;
    width: 38px;
    float: right
  }

  .form .item-vcode:after {
    display: block;
    content: "clear";
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden
  }

  .form #o-authcode.item {
    border: 0
  }

  .form #o-authcode.item .itxt {
    border: 1px solid #bdbdbd;
    font-size: 14px;
    padding: 0;
    vertical-align: middle;
    margin-right: 10px
  }
  .form #o-authcode.item .itxt09 {
    border: 1px solid #9a9a9a;
    font-size: 14px;
    padding: 0;
    vertical-align: middle;
    margin-right: 10px
  }
  .form #o-authcode.item .itxt10 {
    border: 1px solid #e4393c;
    font-size: 14px;
    padding: 0;
    vertical-align: middle;
    margin-right: 10px
  }

  .form #o-authcode.item-error {
    border: 0
  }

  .form #o-authcode.item-error .itxt {
    border-color: #e4393c
  }

  .form #o-authcode.item-focus {
    border: 0
  }

  .form #o-authcode.item-focus .itxt {
    border-color: #bbb
  }
  .form .item-focus {
    border: 1px solid #9a9a9a
  }

  .form .item-focus .name-label {
    background-position: 0 -48px;
    border-color: #bbb
  }

  .form .item-focus .pwd-label {
    background-position: -48px -48px;
    border-color: #bbb
  }
  .login-form {
    position: relative;
    z-index: 4;
    background: #fff;
    overflow: visible;
    width: 346px
  }

  .login-form .login-tab {
    width: 100%;
    height: 54px;
    font-size: 18px;
    font-family: "microsoft yahei";
    text-align: center;
    border-bottom: 1px solid #f4f4f4;
    position: absolute;
    background: #fff;
    display: block;
  }

  .login-form .login-tab p {
    width: 100%;
    height: 18px;
    position: absolute;
    left: 0;
    top: 18px;
    font-weight: 700;
    color: #e4393c;
    outline: rgb(109, 109, 109) none 0px;
  }

  .login-form .msg-wrap {
    min-height: 23px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto !important
  }

  .login-form .msg-error {
    position: relative;
    background: #ffebeb;
    color: #e4393c;
    border: 1px solid #faccc6;
    padding: 3px 10px 3px 40px;
    line-height: 15px;
    height: auto
  }

  .login-form .msg-error b {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background: url(../assets/images/login/pwd-icons-new.png) -104px -49px no-repeat
  }

  .login-form .login-box {
    width: 306px;
    padding: 20px;
    visibility: hidden;
  }

  .login-form .login-box .mt {
    display: inline-block;
    display: block;
    width: 306px;
    overflow: visible;
    height: 27px
  }

  .login-form .login-box .mt:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  * html .login-form .login-box .mt {
    height: 1%
  }

  * + html .login-form .login-box .mt {
    min-height: 1%
  }

  .login-form .login-box .mc {
    overflow: visible
  }

  .login-form .login-box .login-btn {
    margin: 0 auto;
    height: 35px;
    width: 100%;
    position: relative
  }

  .login-form .login-box .login-btn .btn-img {
    display: block;
    width: 100%;
    background: #e4393c;
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: 20px;
    font-family: 'Microsoft YaHei'
  }

  .login-form .login-box .login-btn .btn-img:hover {
    background: #c81623;
  }

  .login-form .login-box .login-btn .btn-img:active {
    background: #c81623;
    color: #eababc
  }


  .coagent {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-top: 1px solid #f4f4f4;
    height: auto;
    background-color: #fcfcfc
  }

  .coagent ul {
    display: inline-block;
    display: block
  }

  .coagent ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  * html .coagent ul {
    height: 1%
  }

  * + html .coagent ul {
    min-height: 1%
  }

  .coagent li {
    float: left
  }


  .coagent li.extra-r {
    float: right
  }

  .coagent .regist-link {
    color: #b61d1d;
    font-size: 14px
  }

  .coagent .regist-link a {
    color: #b61d1d
  }

  .coagent .regist-link b {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background: url(../assets/images/login/pwd-icons-new.png) -104px -75px no-repeat;
    vertical-align: middle;
    margin-right: 5px
  }

  .login-wrap {
    position: relative;
    height: 460px;
    margin: 10px 0 20px;
    z-index: 5
  }

  .login-wrap .login-banner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 480px;
    //background: #c81623;
  }

  .login-wrap .i-inner {
    position: relative;
    z-index: 3;
    height: 480px
  }

  .login-wrap .login-form {
    float: right;
    top: 46px
  }
}
</style>
